<template>
  <div class="corporate-information">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>企业入驻</span>
        <el-button
          style="float: right; margin-top: -10px;"
          type="primary"
          @click="handleNext"
          :loading="loading"
        >
          {{ active === 2 ? '提交' : '提交并进入下一步' }}
        </el-button>
        <el-button
          style="float: right; margin: -10px 10px;"
          v-show="active > 0"
          @click="handlePrev"
        >
          上一步
        </el-button>
      </div>
      <div class="card-step-content">
        <div
          v-for="(step, index) in steps"
          :key="index"
          :class="`card-item ${index <= active ? 'active' : ''}`"
        >
          <img :src="index <= active ? step.acitveIcon : step.icon" />
          <div class="label">{{ step.lable }}</div>
          <div class="step-index">{{ index + 1 }}</div>
          <div class="arrowheads">
            <img :src="active - 1 >= index ? step.acitveArrow : step.arrow" />
          </div>
        </div>
      </div>
    </el-card>
    <el-card class="form-card">
      <base-form
        :submit-data.sync="medicalInstitutionVo"
        ref="medicalInstitutionVo"
        :form-data="formData[0].form"
        :is-option="false"
        v-if="active === 0"
      >
        <template #title>
          <div class="title">
            {{ formData[0].title }}
            <span class="note">{{ formData[0].note }}</span>
          </div>
        </template>
      </base-form>
      <base-form
        :submit-data.sync="storeInfoVos"
        ref="storeInfoVos"
        :is-option="false"
        :form-data="formData[1].form"
        v-if="active === 1"
        @uploadImgChange="uploadStep2Change"
      >
        <template #title>
          <div class="title">
            {{ formData[1].title }}
            <span class="note">{{ formData[1].note }}</span>
          </div>
        </template>
      </base-form>
      <base-form
        :submit-data.sync="legalPersonVo"
        ref="legalPersonVo"
        :form-data="formData[2].form"
        :is-option="false"
        v-if="active === 2"
      >
        <template #title>
          <div class="title">
            {{ formData[2].title }}
            <span class="note">{{ formData[2].note }}</span>
          </div>
        </template>
      </base-form>
    </el-card>
  </div>
</template>
<script>
import BaseForm from '@/components/BaseForm'
import getArea from '@/utils/area'
import { specialTreatment } from '@/utils'
import {
  getCompanyInfo,
  postInternalSaveStore,
  postApplay,
} from '@/api/CheckIn'
export default {
  name: 'CheckInCorporateInformation',
  components: {
    BaseForm,
  },
  data() {
    return {
      getArea: getArea(),
      steps: [
        {
          icon: require('../../assets/images/checkIn/business_information.png'),
          acitveIcon: require('../../assets/images/checkIn/business_information.png'),
          lable: '企业信息',
          arrow: require('../../assets/images/checkIn/arrowheads_gray.png'),
          acitveArrow: require('../../assets/images/checkIn/arrowheads.png'),
        },
        {
          icon: require('../../assets/images/checkIn/enterprise_qualification_gray.png'),
          acitveIcon: require('../../assets/images/checkIn/enterprise_qualification.png'),
          lable: '企业资质',
          arrow: require('../../assets/images/checkIn/arrowheads_gray.png'),
          acitveArrow: require('../../assets/images/checkIn/arrowheads.png'),
        },
        {
          icon: require('../../assets/images/checkIn/representative_gray.png'),
          acitveIcon: require('../../assets/images/checkIn/representative.png'),
          lable: '法定代表人',
        },
      ],
      loading: false,
      medicalInstitutionVo: {},
      storeInfoVos: {},
      legalPersonVo: {},
      submitData: {},
      keyArr: ['medicalInstitutionVo', 'storeInfoVos', 'legalPersonVo'],
      texts: [
        '• 照片方向正确、不能颠倒；',
        '• 需文字清晰、边框完整',
        '• 复印件需加盖印章；',
        '• 也可提供监管部门认可的具有营业执照同等法律效力的证件；',
        '• 特许证件需符合当地政策；',
      ],
      formData: [
        {
          title: '企业信息',
          note: '准备填写地址和联系方式，便于业务经理联系上你',
          form: {
            inline: false,
            labelWidth: '164px',
            list: [
              {
                label: '机构类型',
                key: 'organizationCode',
                list: () => this.getDict['133'],
                type: 'SELECT',
                props: {
                  value: 'dictCode',
                  label: 'dictValue',
                },
                rules: [
                  {
                    required: true,
                    message: '请选择机构类型',
                    trigger: 'change',
                  },
                ],
              },
              {
                label: '邀请码',
                key: 'invitationCode',
                type: 'INPUT',
                disabled: () => this.checkState === 2,
              },
              {
                label: '企业名称',
                key: 'name',
                type: 'INPUT',
                rules: [
                  {
                    required: true,
                    message: '请输入企业名称',
                    trigger: 'blur',
                  },
                ],
              },
              {
                label: '机构性质',
                key: 'publicType',
                list: () => [
                  { value: 1, label: '公立' },
                  { value: 0, label: '私立' },
                ],
                type: 'SELECT',
              },
              {
                label: '是否连锁机构',
                key: 'linkageType',
                type: 'RADIO',
                update: true,
                list: () => [
                  { value: 1, lable: '是' },
                  { value: 0, lable: '否' },
                ],
              },
              {
                label: '',
                key: 'linkageName',
                type: 'INPUT',
                placeholder: '请输入机构名称',
                associatedField: () =>
                  this.medicalInstitutionVo.linkageType === 1,
              },
              {
                label: '实际经营地址',
                type: 'CASCADER',
                key: 'addressArr',
                setKey: ['provinceCode', 'cityCode', 'areaCode'],
                list: getArea(),
                props: {
                  label: 'area_name',
                  value: 'area_code',
                  children: 'children',
                },
                rules: [
                  {
                    required: true,
                    message: '请选择省/市/区',
                    trigger: 'change',
                  },
                ],
              },
              {
                label: '详细地址',
                key: 'address',
                keyLng: 'longitude', //精度
                keyLat: 'latitude', //纬度
                type: 'AMAPMAP',
                rules: [
                  {
                    required: true,
                    message: '请输入详细地址',
                    trigger: 'change',
                  },
                ],
              },
              {
                label: '企业联系人',
                key: 'storeContact',
                type: 'INPUT',
                rules: [
                  {
                    required: true,
                    message: '请输入企业联系人',
                    trigger: 'blur',
                  },
                ],
              },
              {
                label: '座机号码',
                key: 'landline',
                type: 'INPUT',
              },
              {
                label: '手机号码',
                key: 'contactPhone',
                type: 'INPUT',
                rules: [
                  {
                    required: true,
                    message: '请输入手机号码',
                    trigger: 'blur',
                  },
                  {
                    trigger: 'blur',
                    pattern: /^(\+86|0086)?\s*1[345789]\d{9}$/,
                    message: '请输入正确的手机号码',
                  },
                ],
              },
            ],
          },
        },
        {
          title: '资质信息',
          note: '齐全有效的合规资质可一次过审～',
          form: {
            inline: false,
            labelWidth: '200px',
            list: [
              {
                label: '营业执照照片',
                update: true,
                key: '129001_fileUrl',
                params: { type: '129001' },
                action: '/gateway/file-server/file/upload/ocrSingle',
                accept: 'image/png,image/jpg,image/jpeg',
                message: '请上传图片',
                type: 'UPLOAD',
                limitSize: 5120,
                tempHtml: () => (
                  <div class="tempHtml">
                    <div class="image-box">
                      <img
                        width="90"
                        src={require('../../assets/images/checkIn/examples.png')}
                      />
                    </div>
                    {this.texts.map((text) => (
                      <div>{text}</div>
                    ))}
                  </div>
                ),
                note: '请上传png/jpg格式图片，图片大小控制在5MB以内',
                rules: [
                  {
                    required: true,
                    message: '请上传营业执照照片',
                    trigger: 'change',
                  },
                ],
              },
              {
                label: '营业执照名称',
                key: '129001_fileName',
                type: 'INPUT',
                associatedField: '129001_fileUrl',
                rules: [
                  {
                    required: true,
                    message: '请输入营业执照名称',
                    trigger: 'blur',
                  },
                ],
              },
              {
                label: '统一社会信用代码',
                key: '129001_fileCode',
                type: 'INPUT',
                associatedField: '129001_fileUrl',
                rules: [
                  {
                    required: true,
                    message: '请输入统一社会信用代码',
                    trigger: 'blur',
                  },
                ],
              },
              {
                label: '注册资本(万元)',
                key: '129001_registeredCapital',
                type: 'INPUTNUMBER',
                associatedField: '129001_fileUrl',
                precision: 0,
                rules: [
                  {
                    required: true,
                    message: '请输入注册资本',
                    trigger: 'blur',
                  },
                ],
              },
              {
                label: '法定代表人',
                key: '129001_legalPerson',
                type: 'INPUT',
                associatedField: '129001_fileUrl',
                rules: [
                  {
                    required: true,
                    message: '请输入法定代表人',
                    trigger: 'blur',
                  },
                ],
              },
              {
                label: '经营场所/住所',
                key: '129001_place',
                associatedField: '129001_fileUrl',
                type: 'INPUT',
                rules: [
                  {
                    required: true,
                    message: '请输入经营场所/住所',
                    trigger: 'blur',
                  },
                ],
              },
              {
                label: '营业执照有效期',
                key: '129001_isNoExpire',
                associatedField: '129001_fileUrl',
                type: 'RADIO',
                rules: [
                  {
                    required: true,
                    message: '请选择营业执照有效期',
                    trigger: 'change',
                  },
                ],
                list: () => [
                  { lable: '长期有效', value: 1, note: '执照上没有经营期限' },
                  { lable: '固定有效', value: 0, note: '执照上有经营期限' },
                ],
              },
              {
                label: '',
                key: '129001_expireDateTiem',
                setKeys: ['129001_startDate', '129001_expireDate'], //【开始，结束】
                dateType: 'daterange',
                type: 'DATE',
                associatedField: () =>
                  this.storeInfoVos['129001_isNoExpire'] === 0,
                format: 'yyyy-MM-dd',
                valueFormat: 'yyyy-MM-dd',
                rules: [
                  {
                    required: true,
                    message: '请选择许证件有效期',
                    trigger: 'blur',
                  },
                ],
              },
              {
                label: '注册/成立时间',
                key: '129001_regDate',
                associatedField: '129001_fileUrl',
                type: 'DATE',
                format: 'yyyy-MM-dd',
                rules: [
                  {
                    required: true,
                    message: '请选择注册/成立时间',
                    trigger: 'blur',
                  },
                ],
              },
              {
                label: '发证/登记机关',
                key: '129001_register',
                associatedField: '129001_fileUrl',
                type: 'INPUT',
                rules: [
                  {
                    required: true,
                    message: '请选择发证/登记机关',
                    trigger: 'blur',
                  },
                ],
              },
              {
                label: '核准日期',
                key: '129001_approvalData',
                associatedField: '129001_fileUrl',
                type: 'DATE',
                format: 'yyyy-MM-dd',
                rules: [
                  {
                    required: true,
                    message: '请选择核准日期',
                    trigger: 'blur',
                  },
                ],
              },
              {
                type: 'div',
                text:
                  '请录入下列证照资质信息，其中医疗器械经营许可证、医疗机构执业许可证第二类医疗器械经营备案凭证可以代替医疗器械经营许可证，只需上传第二类医疗器械经营备案凭证。',
                style: {
                  fontSize: '14px',
                  color: '#1890ff',
                },
              },
              {
                label: '医疗机构执业许可证',
                key: '129019_fileUrl',
                update: true,
                params: { type: '129019' },
                action: '/gateway/file-server/file/upload/ocrSingle',
                accept: 'image/png,image/jpg,image/jpeg',
                message: '请上传图片',
                type: 'UPLOAD',
                limitSize: 5120,
                tempHtml: () => (
                  <div class="tempHtml">
                    <div class="image-box">
                      <img
                        width="90"
                        src={require('../../assets/images/checkIn/practice_license_of_medical_institution.png')}
                      />
                    </div>
                    {this.texts.map((text) => (
                      <div>{text}</div>
                    ))}
                  </div>
                ),
                note: '请上传png/jpg格式图片,图片大小控制在5MB以内',
                rules: [
                  {
                    required: true,
                    message: '请上传医疗机构执业许可证',
                    trigger: 'change',
                  },
                ],
              },
              {
                label: '机构名称',
                key: '129019_fileName',
                associatedField: '129019_fileUrl',
                type: 'INPUT',
                rules: [
                  {
                    required: true,
                    message: '请输入经营者名称',
                    trigger: 'blur',
                  },
                ],
              },
              {
                label: '诊疗科目',
                key: '129019_subject',
                associatedField: '129019_fileUrl',
                type: 'INPUT',
                rules: [
                  {
                    required: true,
                    message: '请输入诊疗科目',
                    trigger: 'blur',
                  },
                ],
              },
              {
                label: '法定代表人',
                key: '129019_legalPerson',
                associatedField: '129019_fileUrl',
                type: 'INPUT',
                rules: [
                  {
                    required: true,
                    message: '请输入法定代表人',
                    trigger: 'blur',
                  },
                ],
              },
              {
                label: '主要负责人',
                key: '129019_principal',
                associatedField: '129019_fileUrl',
                type: 'INPUT',
                rules: [
                  {
                    required: true,
                    message: '请输入主要负责人',
                    trigger: 'blur',
                  },
                ],
              },
              {
                label: '登记号',
                key: '129019_fileCode',
                associatedField: '129019_fileUrl',
                type: 'INPUT',
                rules: [
                  {
                    required: true,
                    message: '请输入登记号',
                    trigger: 'blur',
                  },
                ],
              },
              {
                label: '有效期',
                key: '129019_expireDateTiem',
                setKeys: ['129019_startDate', '129019_expireDate'], //【开始，结束】
                dateType: 'daterange',
                associatedField: '129019_fileUrl',
                type: 'DATE',
                format: 'yyyy-MM-dd',
                valueFormat: 'yyyy-MM-dd',
                rules: [
                  {
                    required: true,
                    message: '请选择许可证有效期',
                    trigger: 'blur',
                  },
                ],
              },
            ],
          },
        },
        {
          title: '法定代表人',
          key: 'legalPersonVo',
          note: '请按要求上传并实名认证法定代表人信息',
          form: {
            inline: false,
            labelWidth: '164px',
            list: [
              {
                label: '法人身份证照片',
                required: true,
                params: { type: '129001' },
                action: '/gateway/file-server/file/upload/ocrSingle',
                style: {
                  width: '400px',
                },
                children: [
                  {
                    label: '正面',
                    params: { type: '113001' },
                    action: '/gateway/file-server/file/upload/ocrSingle',
                    key: 'idFrontUrl',
                    accept: 'image/png,image/jpg,image/jpeg',
                    message: '请上传图片',
                    type: 'UPLOAD',
                    limitSize: 5120,
                    update: true,
                    note:
                      '身份证正面---请上传png/jpg格式图片, 图片大小控制在5MB以内',
                    rules: [
                      {
                        required: true,
                        message: '请上传身份证正面',
                        trigger: 'change',
                      },
                    ],
                  },
                  {
                    label: '反面',
                    params: { type: '113002' },
                    action: '/gateway/file-server/file/upload/ocrSingle',
                    accept: 'image/png,image/jpg,image/jpeg',
                    message: '请上传图片',
                    type: 'UPLOAD',
                    limitSize: 5120,
                    update: true,
                    note:
                      '身份证反面---请上传png/jpg格式图片,图片大小控制在5MB以内',
                    key: 'idBackUrl',
                    rules: [
                      {
                        required: true,
                        message: '请上传身份证反面',
                        trigger: 'blur',
                      },
                    ],
                  },
                ],
              },
              {
                label: '法人姓名',
                key: 'legalRepName',
                type: 'INPUT',
                rules: [
                  {
                    required: true,
                    message: '请输入法人姓名',
                    trigger: 'blur',
                  },
                ],
              },
              {
                label: '法人身份证号码',
                key: 'legalRepCertNo',
                type: 'INPUT',
                rules: [
                  {
                    required: true,
                    message: '请输入法人身份证号码',
                    trigger: 'blur',
                  },
                  {
                    trigger: 'blur',
                    pattern: /(^\d{8}(0\d|10|11|12)([0-2]\d|30|31)\d{3}$)|(^\d{6}(18|19|20)\d{2}(0[1-9]|10|11|12)([0-2]\d|30|31)\d{3}(\d|X|x)$)/,
                    message: '请输入正确法人身份证号码',
                  },
                ],
              },
              {
                label: '法人手机号码',
                key: 'phone',
                type: 'INPUT',
                rules: [
                  {
                    required: true,
                    message: '请输入手机号码',
                    trigger: 'blur',
                  },
                  {
                    trigger: 'blur',
                    pattern: /^(\+86|0086)?\s*1[345789]\d{9}$/,
                    message: '请输入正确的手机号码',
                  },
                ],
              },
              {
                label: '性别',
                key: 'gender',
                type: 'RADIO',
                list: () => [
                  { value: 0, lable: '女' },
                  { value: 1, lable: '男' },
                ],
                rules: [
                  {
                    required: true,
                    message: '请选择性别',
                    trigger: 'change',
                  },
                ],
              },
              {
                label: '民族',
                key: 'nation',
                type: 'INPUT',
                rules: [
                  {
                    required: true,
                    message: '请输入民族',
                    trigger: 'blur',
                  },
                ],
              },
              {
                label: '出生日期',
                key: 'birthday',
                type: 'DATE',
                format: 'yyyy-MM-dd',
                rules: [
                  {
                    required: true,
                    message: '请选择出生日期',
                    trigger: 'blur',
                  },
                ],
              },
              {
                label: '住址',
                key: 'addr',
                type: 'INPUT',
                rules: [
                  {
                    required: true,
                    message: '请输入详细地址',
                    trigger: 'blur',
                  },
                ],
              },
              {
                label: '签发机关',
                key: 'issuingAuthority',
                type: 'INPUT',
                rules: [
                  {
                    required: true,
                    message: '请输入签发机关',
                    trigger: 'blur',
                  },
                ],
              },
              {
                label: '证件有效期',
                key: 'isNoExpire',
                type: 'RADIO',
                update: true,
                list: () => [
                  { value: 1, lable: '长期有效' },
                  { value: 0, lable: '固定有效期' },
                ],
                rules: [
                  {
                    required: true,
                    message: '请输入证件有效期',
                    trigger: 'change',
                  },
                ],
              },
              {
                label: '',
                key: 'expireDateTiem',
                setKeys: ['startDate', 'expireDate'], //【开始，结束】
                dateType: 'daterange',
                type: 'DATE',
                associatedField: () => this.legalPersonVo.isNoExpire === 0,
                format: 'yyyy-MM-dd',
                valueFormat: 'yyyy-MM-dd',
                rules: [
                  {
                    required: true,
                    message: '请选择许证件有效期',
                    trigger: 'blur',
                  },
                ],
              },
              {
                type: 'TITLE',
                text: '企业开户行信息',
                note: '若不使用开票系统可不填',
              },
              {
                label: '开户行',
                key: 'bankBranch',
                keyBank: 'bank', //精度
                keyZhi: 'bankBranch', //纬度
                type: 'BANK',
                rules: [
                  {
                    required: true,
                    message: '请输入开户行',
                    trigger: 'blur',
                  },
                ],
              },
              {
                label: '账号',
                key: 'accountNo',
                type: 'INPUT',
                rules: [
                  {
                    required: true,
                    message: '请输出账号',
                    trigger: 'blur',
                  },
                ],
              },
            ],
          },
        },
      ],
      active: 0,
      checkState: -9,
    }
  },
  watch: {
    $route(value) {
      this.routeInit(value)
    },
  },
  created() {
    this.routeInit(this.$route)
  },
  mounted() {
    this.$nextTick(() => {
      this.init()
    })
  },

  computed: {},
  methods: {
    uploadStep2Change({ obj, data }) {
      let { storeInfoVos } = this;
      if (data.key.includes("129001")) {
        obj["129001_fileName"] =
          obj["129001_name"] || storeInfoVos["129001_fileName"];
        obj["129001_fileCode"] =
          obj["129001_certificateNo"] || storeInfoVos["129001_fileCode"];
      } else if (data.key.includes("129019")) {
        obj["129019_fileName"] = obj["129019_name"] || storeInfoVos["129019_fileName"];
           obj["129019_fileCode"] =
          obj["129019_certificateNo"] || storeInfoVos["129019_fileCode"];
      } 
      this.storeInfoVos = Object.assign(this.storeInfoVos, obj);
    },
    uploadImgChange({ obj }) {
      console.log(obj)
      let { info } = obj
      let { legalPersonVo } = this
      obj.legalRepName = info.name || legalPersonVo.legalRepName
      obj.legalRepCertNo = info.idNumber || legalPersonVo.legalRepCertNo
      obj.gender = info.gender
        ? info.gender === '男'
          ? 1
          : 0
        : legalPersonVo.gender
      obj.nation = info.nationality || legalPersonVo.nation
      obj.addr = info.address || legalPersonVo.addr
      obj.birthday = info.birthDate || legalPersonVo.birthday
      obj.startDate = info.startDate || legalPersonVo.startDate
      obj.expireDate = info.endDate || legalPersonVo.expireDate
      obj.expireDate = info.endDate || legalPersonVo.expireDate
      obj.idFrontUrl = obj.idFrontUrl || legalPersonVo.idFrontUrl
      obj.idBackUrl = obj.idBackUrl || legalPersonVo.idBackUrl
      obj.issuingAuthority = info.issue || legalPersonVo.issuingAuthority
      if (obj.startDate && obj.expireDate) {
        obj.expireDateTiem = [obj.startDate, obj.expireDate]
      }
      this.legalPersonVo = obj
    },
    routeInit({ path, query }) {
      if (isNaN(Number(query.step))) {
        this.$router.push({ path, query: { step: 0 } })
      }
      if (Number(query.step) > 3) {
        this.$router.push({ path, query: { step: 3 } })
      }
      this.active = Number(query.step)
    },
    async init() {
      let { storeUuid } = this.getUserInfo
      let res = await getCompanyInfo(storeUuid)
      this.submitData = _.cloneDeep(res)
      let storeInfoVos = {}
      this.checkState = res.checkState
      res.storeInfoVos.forEach((val) => {
        val.expireDateTiem =
          val.startDate && val.expireDate
            ? [val.startDate, val.expireDate]
            : null
        if (val.dictCode.includes('129')) {
          for (let key in val) {
            storeInfoVos[`${val.dictCode}_${key}`] = val[key]
          }
        }
      })
      res.storeInfoVos = storeInfoVos
      this.keyArr.forEach((key) => {
        if (res[key]) {
          this[key] = { ...res[key] }
        }
      })
      this.config()
    },
    config() {
      let { areaCode, cityCode, provinceCode } = this.medicalInstitutionVo
      if (areaCode && cityCode && provinceCode) {
        this.medicalInstitutionVo.addressArr = [
          provinceCode,
          cityCode,
          areaCode,
        ]
        let { addressArr, address } = this.medicalInstitutionVo
        if (this.active === 0) {
          this.$refs.medicalInstitutionVo.handleChange(
            addressArr,
            getArea(),
            {},
          )
          this.$refs.medicalInstitutionVo.handlePoit(null, address)
        }
      }
      let { startDate, expireDate } = this.legalPersonVo
      if (startDate && expireDate) {
        this.$set(this.legalPersonVo, 'expireDateTiem', [startDate, expireDate])
      }
    },
    async handleNext() {
      let { path } = this.$route
      let { keyArr, active, submitData } = this
      this.loading = true
      let vaild = await this.$refs[keyArr[active]].submitForm()
      setTimeout(() => {
        this.loading = false
      }, 500)
      let data =
        active === 1
          ? specialTreatment(this[keyArr[active]], 'dictCode')
          : this[keyArr[active]]
      submitData = { ...submitData, flowState: active + 1 }
      submitData[keyArr[active]] = data
      //第二哥步骤的提交需要特殊处理
      if (this.active < this.steps.length && vaild) {
        if (this.active === 2) {
          // let { storeUuid } = this.getUserInfo;
          // let { certificationStatus } = await getCompanyInfo(storeUuid);
          let text = '如已验证，点击确定按钮提交信息'
          submitData[keyArr[active]] = data
          let { url } = await postInternalSaveStore(submitData)
          window.open(url)
          let confirm = await this.$confirm(text, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }).catch(() => {})
          if (confirm === 'confirm') {
            await postApplay()
            this.$router.replace({
              path: 'check-in-status',
              query: { status: 0 },
            })
          }
        } else {
          await postInternalSaveStore(submitData)
        }
        if (this.active < 2) {
          ++this.active
          this.$router.push({ path, query: { step: this.active } })
        }
      }
    },
    handlePrev() {
      let { path } = this.$route
      if (this.active > 0) {
        --this.active
        this.$router.push({ path, query: { step: this.active } })
        setTimeout(() => {
          this.config()
        }, 0)
      }
    },
  },
}
</script>
<style lang="less">
.corporate-information {
  .card-step-content {
    display: flex;
    text-align: center;
    > div {
      flex: 1;
      font-size: 16px;
      position: relative;
      .label {
        color: #909399;
      }
      .arrowheads {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translate(50%, -50%);
      }
      .step-index {
        width: 32px;
        height: 32px;
        background: #c0c4cc;
        border-radius: 50%;
        display: inline-block;
        line-height: 32px;
        font-size: 18px;
        font-weight: 600;
        color: #fff;
        margin-top: 10px;
      }
    }
    > div.active {
      .label {
        color: #1890ff;
      }
      .step-index {
        background: #1890ff;
      }
    }
  }
  .form-card {
    margin-top: 10px;
    padding: 0 30px;
    height: calc(100vh - 280px);
    overflow-y: auto;
    .title {
      margin-bottom: 23px;
      > span {
        color: #909399;
        font-size: 12px;
        margin-left: 7px;
      }
    }
  }
}
.tempHtml {
  width: 500px;
  height: 140px;
  background: url('../../assets/images/checkIn/bg.png') no-repeat;
  background-size: 100%;
  font-size: 12px;
  line-height: 18px;
  padding: 32px 0 22px 130px;
  color: #909399;
  box-sizing: border-box;
  position: relative;
  .image-box {
    position: absolute;
    left: 20px;
    top: 30px;
  }
}
</style>